<!-- eslint-disable -->
<template>
  <div class="page-main">
    <el-row class="list-search">
      <div class="content-search">
        <el-form :inline="true" :model="data" @submit.native.prevent>
          <!-- <el-form-item label="用户iD">
            <el-input v-model="data.user_id" type="text" size="small" placeholder="请输入用户iD" clearable></el-input>
          </el-form-item> -->
          <el-form-item label="描述">
            <el-input v-model="data.describe" type="text" size="small" placeholder="请输入描述" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="search">搜 索</el-button>
            <el-button size="small" @click="searchReset">重 置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="separate-search"></div>
    </el-row>

    <el-row class="list-header">
      <div class="header-div">
        <div class="list-title">问诊工单列表</div>
        <div class="div-header-btn">
          <!-- <el-button type="primary" size="small" @click="editTmp()">新 增</el-button> -->
        </div>
      </div>
    </el-row>

    <el-row>
      <el-table :data="dataList" v-loading="loading" size="medium" border
        @selection-change="handleSelectionChange"
        :cell-style="{ padding: '8px 0' }"
        :header-cell-style="{ fontWeight: 'bold', color: '#333', backgroundColor: '#FAFAFA' }">
        <!-- <el-table-column type="selection" min-width="40"></el-table-column> -->
        <el-table-column prop="id" label="编号" width="70"></el-table-column>
        <el-table-column prop="user_id" label="用户信息" min-width="100">
          <template slot-scope="scope">
            <div>
              <div>ID：{{scope.row.user_id}}</div>
              <div>昵称：{{scope.row.nickname}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="describe" label="描述" min-width="100"></el-table-column>
        <el-table-column prop="images" label="图片" min-width="130">
          <template slot-scope="scope" v-if="scope.row.images">
            <el-popover
              v-for="(src, index) in scope.row.images"
              :key="index"
              placement="right"
              width="230"
              trigger="click">
              <el-image
                fit="contain"
                style="width: 200px; height: 200px"
                :src="src">
              </el-image>
              <el-image
                slot="reference"
                fit="contain"
                style="width: 50px; height: 50px; cursor: pointer;"
                :src="src">
              </el-image>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="状态" min-width="60">
          <template slot-scope="scope">
            <div>
                <span v-if="scope.row.status == 1" class="el-tag el-tag--danger">待回复</span>
                <span v-else class="el-tag">已回复</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" min-width="100"></el-table-column>
        <el-table-column label="操作" min-width="120">
          <template slot-scope="scope">
            <el-button @click="showReply(scope.row)" type="text" size="mini">回复</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button @click="toRecords(scope.row)" type="text" size="mini">对话记录</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-popconfirm
              @confirm="del(scope.row.id)"
              icon="el-icon-warning"
              placement="top"
              title="是否要删除此行？">
              <el-button size="mini" type="text" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <el-row class="pagination pagination-news">
      <div class="pagination-div">
        <div class="total-con">
          <div class="pagination-total">共 <em> {{totalCount}} </em> 条记录</div>
        </div>
        <el-pagination
          @current-change="changePage"
          @size-change="changePageSize"
          background
          :layout="pageLayout"
          :page-sizes="pagePageSizes"
          :page-size="pagePageSize"
          :total="totalCount"
          :current-page.sync="current_page"
          :hide-on-single-page="false">
        </el-pagination>
      </div>
    </el-row>

    <consultationForm @refreshPage="refreshPage" ref="refConsultationForm"></consultationForm>
    <consultationReply @refreshPage="refreshPage" ref="refConsultationReply"></consultationReply>
  </div>
</template>

<!-- eslint-disable -->
<script>
  import {ConsultationIndex, ConsultationDel} from '@/utils/request.js'
  import consultationForm from './consultation-form'
  import consultationReply from './consultation-reply'
  import '@/assets/css/news.css';

  export default {
    components: { consultationForm, consultationReply },
    data(){
      return {
        data: {
          page: 1,
          page_size: this.pagePageSize,
        },
        dataList: [],
        loading: false,
        totalCount: 0,
        current_page: 1,
        multipleSelection: [],
      }
    },
    activated() {
      this.data.page = 1
      this.current_page = 1
      this.getList()
    },
    methods: {
      toRecords(row) {
        this.$router.push({ path: 'consultation-records', query: { consultation_id: row.id }})
      },
      changePage(page) {
        this.data.page = page
        this.getList()
      },
      changePageSize(size) {
        this.data.page_size = size
        this.data.page = 1
        this.current_page = 1
        this.getList()
      },
      refreshPage() {
        this.data.page--
        this.getList()
      },
      getList() {
        this.loading = true
        ConsultationIndex(this.data).then((res) => {
          if (res.code == 0) {
            this.data.page++
            this.dataList = res.data.data
            this.totalCount = res.data.count
          } else {
            this.$message.error('数据获取失败!')
          }
          this.loading = false
        })
      },
      delMultiple() {
        if (this.multipleSelection.length == 0) {
          this.$message.error('请至少选择一项你要删除的项');
          return
        }

        this.$confirm('确定要执行删除操作吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
          this.del(this.multipleSelection)
        }).catch(() => {
          // 取消操作
        });
      },
      del(id) {
        ConsultationDel({id: id}).then((res) => {
      	  if (res.code == 0) {
            this.refreshPage()
              this.$message.success(res.msg);
            } else {
              this.$message.error(res.msg);
            }
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = []
        if (val.length > 0) {
          val.filter((item) => {
            this.multipleSelection.push(item.id)
          })
        }
      },
      editTmp(row) {
        if (row) {
          this.$refs.refConsultationForm.editTmp(row)
        } else {
          this.$refs.refConsultationForm.dialogFormVisible = true
        }
      },
      showReply(row) {
        this.$refs.refConsultationReply.editTmp(row)
      },
      search() {
        this.data.page = 1
        this.current_page = 1
        this.getList()
      },
      searchReset() {
        this.data = {
          page: 1,
          page_size: this.data.page_size
        }
      },
    }
  }
</script>

<style scoped>

</style>
